<template>
    <div>
        <div id="editorElem"></div>
    </div>
</template>

<script>
    import E from 'wangeditor'

    let editor;

    export default {
      name: 'editor',
      props: {
        value: String
      },
      data () {
        return {
          editorContent: ''
        }
      },
      watch : {
        'value': function(val) {
          editor.txt.html(val);
        }
      },
      methods: {},
      mounted() {
        editor = new E('#editorElem');
        editor.customConfig.onchange = (html) => {
          this.$emit('input', html)
        }
        editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          'image',  // 插入图片
          'table',  // 表格
          'undo',  // 撤销
          'redo'  // 重复
        ]
        editor.customConfig.zIndex = 40;
        editor.create();
      }
    }
</script>

<style scoped>
</style>